<template>
  <div>
    <div class="box">
      <el-form :model="queryForm" ref="queryRef" :rules="rules">
        <el-row>
          <el-col :span="6">
            <el-form-item label="教师：" prop="tea_code">
              <el-select v-model="queryForm.tea_code" class="m-2" placeholder="请选择" filterable clearable>
                <el-option v-for="item in teacherList" :key="item.tea_code" :label="item.tea_name"
                  :value="item.tea_code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button @click="queryClassTimeData()" :loading="searchLoading" type="primary">
                <icons name="search"></icons>
                搜索
              </el-button>
              <el-button @click="reset()">
                <icons name="reset"></icons>重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="container">
      <el-table :data="tableData" border style="width: 100%">
        ['weekOne', 'weekTwo', 'weekThr', 'weekFou', 'weekFiv', 'weekSix', 'weekSev']
        <el-table-column prop="weekOne" label="周一" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekOne" style="color: #409eff">
              <p>{{ row.weekOne.cur_name }}</p>
              <p>{{ row.weekOne.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekTwo" label="周二" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekTwo" style="color: #409eff">
              <p>{{ row.weekTwo.cur_name }}</p>
              <p>{{ row.weekTwo.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekThr" label="周三" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekThr" style="color: #409eff">
              <p>{{ row.weekThr.cur_name }}</p>
              <p>{{ row.weekThr.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekFou" label="周四" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekFou" style="color: #409eff">
              <p>{{ row.weekFou.cur_name }}</p>
              <p>{{ row.weekFou.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekFiv" label="周五" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekFiv" style="color: #409eff">
              <p>{{ row.weekFiv.cur_name }}</p>
              <p>{{ row.weekFiv.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekSix" label="周六" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekSix" style="color: #409eff">
              <p>{{ row.weekSix.cur_name }}</p>
              <p>{{ row.weekSix.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
        <el-table-column prop="weekSev" label="周日" align="center" header-align="center">
          <template #default="{ row, $index }">
            <div v-if="row.weekSev" style="color: #409eff">
              <p>{{ row.weekSev.cur_name }}</p>
              <p>{{ row.weekSev.class_room }}</p>
              <p>{{ `第${$index + 1}节课` }}</p>
            </div>
            <div v-else style="color:#b4b3b3">{{ `第${$index + 1}节` }}无课</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
import { queryClassTimeList, queryClassPlanTeaList } from '@/api/public'
import { defineComponent, reactive, ref } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage } from 'element-plus'
import messages from '@/utils/language'
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const tableData: any = ref([])
    const searchLoading = ref(false)
    const teacherList: any = ref([])
    const tableLoading = ref(false)
    const queryRef: any = ref(null)
    const queryForm = reactive({
      tea_code: null,
      cur_code: null
    })
    const rules = {
      tea_code: [{ required: true, message: '必填项', trigger: 'blur' }]
    }

    const queryClassTimeData = () => {
      queryRef.value.validate((valid) => {
        if (!valid) return
        const week = ['weekOne', 'weekTwo', 'weekThr', 'weekFou', 'weekFiv', 'weekSix', 'weekSev']
        const classNum = [1, 2, 3, 4, 5, 6] // 一天六节课
        tableData.value = []
        searchLoading.value = true
        tableLoading.value = true
        queryClassTimeList(queryForm).then((res: any) => {
          const { data } = res
          classNum.forEach((item, index) => {
            const obj: any = {}
            data.forEach((ite: any, ind) => obj[week[ind]] = ite[index])
            tableData.value.push(obj)
          })
        }).finally(() => {
          searchLoading.value = false
          tableLoading.value = false
        })
      })
    }

    const reset = () => {
      queryRef.value.resetFields()
    }

    const queryClassPLanList = () => {
      queryClassPlanTeaList().then((res: any) => {
        teacherList.value = res.data
      })
    }

    queryClassPLanList()
    return {
      teacherList,
      queryForm,
      tableData,
      searchLoading,
      tableLoading,
      queryRef,
      rules,
      queryClassTimeData,
      reset
    }
  },
})
</script>
